<template>
	<view class="refund">
		<view class="choose">
			<view class="line dFlex jBetween_aCenter" @tap='changeChoose(1)'>
				<view class="lineTit dFlex jStart_aCenter">
					<view class="statusIcon imgPublic">
						<image v-if="condition != '1'" src="https://wx.gdxixiashi.com/public/images/car/weixuan@2x.png" mode="widthFix"></image>
						<image v-if="condition == '1'" src="https://wx.gdxixiashi.com/public/images/car/yixuan@2x.png" mode="widthFix"></image>
					</view>
					<text>绒布洗护</text>
				</view>
				<view class="lineVal">10m</view>
			</view>
			<view class="line dFlex jBetween_aCenter" @tap='changeChoose(2)'>
				<view class="lineTit dFlex jStart_aCenter">
					<view class="statusIcon imgPublic">
						<image v-if="condition != '2'" src="https://wx.gdxixiashi.com/public/images/car/weixuan@2x.png" mode="widthFix"></image>
						<image v-if="condition == '2'" src="https://wx.gdxixiashi.com/public/images/car/yixuan@2x.png" mode="widthFix"></image>
					</view>
					<text>纯棉洗护</text>
				</view>
				<view class="lineVal">10m</view>
			</view>
		</view>
		<view class="line dFlex jBetween_aCenter">
			<view class="lineTit">退款原因</view>
			<view class="lineVal dFlex jEnd_aCenter">
				<view class="showVal">
					<picker mode="selector" :range="reason" range-key="name" @change='selReason'>
						<input type="text" v-model="sel_reason" placeholder="请选择原因" disabled>
					</picker>
				</view>
				<view class="rightIcon imgPublic">
					<image src="../static/images/rightIcon.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="line dFlex jBetween_aCenter">
			<view class="lineTit">退款金额</view>
			<view class="lineVal dFlex jEnd_aCenter">
				<view class="showVal" style="color: #F84D1F;">￥12.8</view>
			</view>
		</view>
		<view class="line dFlex jBetween_aCenter">
			<view class="lineTit">退款说明</view>
			<view class="lineVal dFlex jEnd_aCenter">
				<view class="showVal">
					<input type="text" placeholder="请输入退款说明（选填）">
				</view>
				<!-- <view class="rightIcon imgPublic">
					<image src="../static/images/rightIcon.png" mode="widthFix"></image>
				</view> -->
			</view>
		</view>
		<view class='btns'>提交</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				condition:'1',
				reason:[
					{id:1,name:'设备故障'},
					{id:2,name:'实际规格不一致'},
					{id:3,name:'清洗窗帘分类选择错误'},
					{id:4,name:'窗帘被损坏'},
				],
				sel_reason:'',
			};
		},
		methods:{
			// 修改选择项
			changeChoose(status){
				this.condition = status;
			},
			// 选择退款原因
			selReason(e){
				this.sel_reason = this.reason[e.detail.value].name;
			}
		}
	}
</script>

<style lang="scss">
	.refund{
		width: 100%;
		.btns{
			width: 100%;
			position: fixed;
			left:0;
			bottom: 0;
			color: white;
			background: linear-gradient(#609ff8 0%, #1664ff 100%);
			border-radius: 5px;
			padding: 12px 0;
			text-align: center;
		}
		>.line{
			padding: 12px 4%;
			width: 100%;
			box-sizing: border-box;
			margin-top: 12px;
			background: white;
			.lineTit{
				color: #666666;
				width: max-content;
			}
			.lineVal{
				flex: 1;
				margin-left: 12px; 
				.showVal{
					width: max-content;
					input{
						text-align: right;
					}
				}
				.blue{
					color: #1664FF;
				}
				.rightIcon{
					width: 16px;
					margin-left: 6px;
				}
				.tx{
					width: 32px;
					height: 32px;
					border-radius: 50%;
					overflow: hidden;
					image{
						height: 100%;
					}
				}
			}
		}
		.choose{
			width: 100%;
			padding: 0 4%;
			box-sizing: border-box;
			background: white;
			.line{
				width: 100%;
				padding: 16px 0;
				border-bottom: 1px solid #F4F4F4;
				font-size:12px;
				color:#333333;
				.lineTit{
					width: max-content;
					font-size: 14px;
					.statusIcon{
						width: 18px;
						height: 18px;
						margin-right: 12px;
					}
				}
			}
			.line:last-child{
				border:none;
			}
		}
	}
</style>
